<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ include file="../common/header.jsp" %>

<div class="main-content">
    <!-- 筛选表单移到标题上方 -->
    <form method="get" action="${pageContext.request.contextPath}/production/environment_monitor" class="mb-3 d-flex align-items-center">
        <label class="me-2">基地ID：</label>
        <select name="baseId" class="form-select me-3" style="width: 150px;">
            <option value="">全部</option>
            <c:forEach var="id" items="${baseIdList}">
                <option value="${id}" <c:if test="${selectedBaseId == id}">selected</c:if>>${id}</option>
            </c:forEach>
        </select>
        <label class="me-2">记录日期：</label>
        <select name="recordDate" class="form-select me-3" style="width: 150px;">
            <option value="">全部</option>
            <c:forEach var="date" items="${recordDateList}">
                <option value="${date}" <c:if test="${selectedRecordDate == date}">selected</c:if>>${date}</option>
            </c:forEach>
        </select>
        <button type="submit" class="btn btn-primary">筛选</button>
    </form>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">生产环境监控</h1>
<%--        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRecordModal">--%>
<%--            <i class="bi bi-plus-circle"></i> 添加记录--%>
<%--        </button>--%>
    </div>
    <!-- 环境数据概览 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">平均温度数据</h5>
                    <c:choose>
                        <c:when test="${not empty selectedBaseId or not empty selectedRecordDate}">
                            <c:choose>
                                <c:when test="${not empty environmentRecords}">
                                    <p class="card-text display-6"><fmt:formatNumber value="${avgTemp}" pattern="#.##"/>℃</p>
                                </c:when>
                                <c:otherwise>
                                    <p class="card-text">无数据</p>
                                </c:otherwise>
                            </c:choose>
                        </c:when>
                        <c:otherwise>
                            <p class="card-text">请先进行筛选</p>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">平均湿度数据</h5>
                    <c:choose>
                        <c:when test="${not empty selectedBaseId or not empty selectedRecordDate}">
                            <c:choose>
                                <c:when test="${not empty environmentRecords}">
                                    <p class="card-text display-6"><fmt:formatNumber value="${avgAirHumidity}" pattern="#.##"/>%</p>
                                </c:when>
                                <c:otherwise>
                                    <p class="card-text">无数据</p>
                                </c:otherwise>
                            </c:choose>
                        </c:when>
                        <c:otherwise>
                            <p class="card-text">请先进行筛选</p>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">平均土壤湿度数据</h5>
                    <c:choose>
                        <c:when test="${not empty selectedBaseId or not empty selectedRecordDate}">
                            <c:choose>
                                <c:when test="${not empty environmentRecords}">
                                    <p class="card-text display-6"><fmt:formatNumber value="${avgSoilHumidity}" pattern="#.##"/>%</p>
                                </c:when>
                                <c:otherwise>
                                    <p class="card-text">无数据</p>
                                </c:otherwise>
                            </c:choose>
                        </c:when>
                        <c:otherwise>
                            <p class="card-text">请先进行筛选</p>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
        
    </div>
    <!-- 环境数据图表 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">温度趋势</h5>
                    <canvas id="temperatureChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">湿度趋势</h5>
                    <canvas id="humidityChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- 环境记录列表 -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">环境记录</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>记录时间</th>
                            <th>基地ID</th>
                            <th>温度(°C)</th>
                            <th>空气湿度(%)</th>
                            <th>土壤湿度(%)</th>
                            <th>空气湿度状态</th>
                            <th>土壤湿度状态</th>
                            <th>温度状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:if test="${empty environmentRecords}">
                            <tr><td colspan="8">无数据</td></tr>
                        </c:if>
                        <c:forEach items="${environmentRecords}" var="record">
                            <tr>
                                <td>${record.recordTime}</td>
                                <td>${record.baseId}</td>
                                <td>${record.temperature}</td>
                                <td>${record.airHumidity}</td>
                                <td>${record.soilHumidity}</td>
                                <td>${record.airHumidityStatus}</td>
                                <td>${record.soilHumidityStatus}</td>
                                <td>${record.temperatureStatus}</td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 添加环境记录模态框/不应该有这个手动添加，环境数据有传感器传入数据库 -->
<%--    <div class="modal fade" id="addRecordModal" tabindex="-1">--%>
<%--        <div class="modal-dialog">--%>
<%--            <div class="modal-content">--%>
<%--                <div class="modal-header">--%>
<%--                    <h5 class="modal-title">添加环境记录</h5>--%>
<%--                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>--%>
<%--                </div>--%>
<%--                <div class="modal-body">--%>
<%--                    <form id="addRecordForm">--%>
<%--                        <div class="mb-3">--%>
<%--                            <label class="form-label">温度(°C)</label>--%>
<%--                            <input type="number" class="form-control" name="temperature" step="0.1" required>--%>
<%--                        </div>--%>
<%--                        <div class="mb-3">--%>
<%--                            <label class="form-label">湿度(%)</label>--%>
<%--                            <input type="number" class="form-control" name="humidity" step="0.1" required>--%>
<%--                        </div>--%>
<%--                        <div class="mb-3">--%>
<%--                            <label class="form-label">土壤湿度(%)</label>--%>
<%--                            <input type="number" class="form-control" name="soilMoisture" step="0.1" required>--%>
<%--                        </div>--%>
<%--                        <div class="mb-3">--%>
<%--                            <label class="form-label">光照强度(lux)</label>--%>
<%--                            <input type="number" class="form-control" name="lightIntensity" required>--%>
<%--                        </div>--%>
<%--                        <div class="mb-3">--%>
<%--                            <label class="form-label">备注</label>--%>
<%--                            <textarea class="form-control" name="notes" rows="3"></textarea>--%>
<%--                        </div>--%>
<%--                    </form>--%>
<%--                </div>--%>
<%--                <div class="modal-footer">--%>
<%--                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>--%>
<%--                    <button type="button" class="btn btn-primary" onclick="submitAddRecord()">保存</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var chartType = '${chartType}';
        // 后端数据转化为数组
        var chartLabels = [<c:forEach var="l" items="${chartLabels}" varStatus="s">"${l}"<c:if test="${!s.last}">,</c:if></c:forEach>];
        var tempData = [<c:forEach var="d" items="${tempData}" varStatus="s">${d}<c:if test="${!s.last}">,</c:if></c:forEach>];
        var humidityData = [<c:forEach var="d" items="${humidityData}" varStatus="s">${d}<c:if test="${!s.last}">,</c:if></c:forEach>];

        function renderChart(canvasId, label, data, type) {
            var ctx = document.getElementById(canvasId).getContext('2d');
            if(window[canvasId + 'Instance']) window[canvasId + 'Instance'].destroy();
            window[canvasId + 'Instance'] = new Chart(ctx, {
                type: type,
                data: {
                    labels: chartLabels,
                    datasets: [{
                        label: label,
                        data: data,
                        backgroundColor: type === 'bar' ? 'rgba(54, 162, 235, 0.5)' : 'rgba(255, 99, 132, 0.2)',
                        borderColor: type === 'bar' ? 'rgba(54, 162, 235, 1)' : 'rgba(255, 99, 132, 1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {legend: {display: true}},
                    scales: {y: {beginAtZero: false}}
                }
            });
        }

        window.onload = function() {
            if(chartType === 'line') {
                renderChart('temperatureChart', '温度(°C)', tempData, 'line');
                renderChart('humidityChart', '湿度(%)', humidityData, 'line');
                document.getElementById('temperatureChart').parentElement.parentElement.style.display = '';
                document.getElementById('humidityChart').parentElement.parentElement.style.display = '';
            } else if(chartType === 'bar') {
                renderChart('temperatureChart', '温度(°C)', tempData, 'bar');
                renderChart('humidityChart', '湿度(%)', humidityData, 'bar');
                document.getElementById('temperatureChart').parentElement.parentElement.style.display = '';
                document.getElementById('humidityChart').parentElement.parentElement.style.display = '';
            } else {
                document.getElementById('temperatureChart').parentElement.parentElement.style.display = 'none';
                document.getElementById('humidityChart').parentElement.parentElement.style.display = 'none';
            }
        }


    </script>
</div>
<%@ include file="../common/footer.jsp" %>
</body>
</html> 